.heroes-list
  height: 100%
  width: 100%
  display: grid
  grid-template-columns: 1fr 4fr
  overflow: hidden
  &-history
    display: flex
    flex-direction: column
    padding: 25px
    background: #00000078
    span
      color: #ffe81f
      font-size: 1.5em
  &-body
    width: 100%
    display: grid
    grid-template-rows: 9vh 1fr
    grid-gap: 5px
    background: #00000046
    &-all
      height: 75vh
      overflow-y: auto
      padding: 20px
      display: grid
      row-gap: 20px
      column-gap: 20px
      grid-template-columns: repeat(auto-fill, minmax(400px, 1fr))
      grid-template-rows: repeat(5, 80px)
    &-filter
      padding: 25px
